* {
  box-sizing: border-box;
  color: #fff;
  font-family: Helvetica;
}
body {
  height: 100vh;
  background-image: linear-gradient(#16a085, #34495e);
}
h1 {
  text-align: center;
  letter-spacing: 2px;
}
.container {
  width: 300px;
  height: 300px;
  margin: 100px auto;
  position: relative;
}
.gradientCycle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    #2ecc71 0%,
    #27ae60 40%,
    #ecf0f1 40%,
    #ecf0f1 60%,
    #16a085 60%,
    #1abc9c 100%
  );
}
.text {
  text-align: center;
  width: 270px;
  height: 270px;
  font-size: 22px;
  letter-spacing: 4px;
  line-height: 270px;
  border-radius: 50%;
  background-color: #34495e;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pointContainer {
  z-index: 10;
  width: 20px;
  height: calc(50% + 30px);
  position: absolute;
  left: 140px;
  top: -30px;
  transform-origin: bottom center;
  animation: rotate 7.5s linear infinite;
}
.point {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
}
.grow {
  animation: grow 3s linear forwards;
}
.shrink {
  animation: shrink 3s linear forwards;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes grow {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}
@keyframes shrink {
  from {
    transform: scale(1.2);
  }
  to {
    text-transform: scale(1);
  }
}
